<template>
    <div class="all_view">
        <Data_show_mode_cp
            :data_list="data_list"
            @sort-change="sortChange"
            @change_show_mode="change_show_mode">
            <template #left>
                全部
            </template>
        </Data_show_mode_cp>
    </div>
</template>

<script>
import Data_show_mode_cp from '@/components/public_cp/data_show_mode'
export default {  //全部文件视图
    name: 'All_view',
    components:{Data_show_mode_cp},
    data(){
        return{
            data_list:[],
            cp_show:false, //当前组件是否显示
            order:null,
        };
    },
    activated(){ //页面显示就刷新一次
        this.cp_show = true;
        this.get_data();
    },
    deactivated(){
        this.cp_show = false;
    },
    watch:{
        '$store.state.update_data'(){ //监听全局更新的状态来决定是否更新文件列表
            if(this.cp_show){
                this.get_data();
            }
        },
    },
    methods:{
        get_data(){ //从后端获取全部文件列表
            this.$store.commit('set_loading',{
                state:true,
                msg:'正在获取文件列表',
            });
            let param = {};
            let url = '/file/findList';
            if(this.order != null){
                param.sort = this.order;
            }
            this.$axios.json_post(url,param).then(({data})=>{
                this.data_list = data;
                this.$store.commit('setAllFileNumber',data.length);
                this.get_file_size();
            }).finally(()=>{
                this.$store.commit('set_loading',{
                    state:false,
                });
            }).catch(msg=>{
                this.data_list = [];
                this.$store.commit('setAllFileNumber',0);
                this.$store.commit('setFileSize',0);
            });
        },
        get_file_size(){ //获取文件总大小
            this.$axios.json_post('/file/findSize').then(({data})=>{
                this.$store.commit('setFileSize',data);
            }).catch(()=>{
                return;
            });
        },
        sortChange(order){ //排序回调方法
            if(order=="ascending"){ //升序 从小到大
                this.order = 1;
            }else if(order=="descending"){ //降序 从大到小
                this.order = 0;            
            }else{
                this.order = null;            
            }
            this.get_data();
        },
        change_show_mode(mode){ //当视图切换显示模式时重新加载数据
            this.order = null; 
            this.get_data();
        },
    },
}
</script>

<style scoped lang='scss'>
.all_view{
    width: 100%;
    padding: 0 25px;
    box-sizing: border-box;
}
</style>
